<template>
  <div class="content">
    <div class="list">
      <!-- 版本号 -->
      <div class="listCon" @click="toVersion">
        <span>版本号</span>
        <img src="/img/circle/next.png" alt="">
      </div>
      <!-- 关于我们 -->
      <div class="listCon" @click="toAboutUs">
        <span>关于我们</span>
        <img src="/img/circle/next.png" alt="">
      </div>
      <!-- 修改密码 -->
      <div class="listCon" @click="toChangePassword">
        <span>修改密码</span>
        <img src="/img/circle/next.png" alt="">
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    // 版本号
    toVersion() {
      this.$router.push("/Version");
    },
    // 关于我们
    toAboutUs() {
      this.$router.push("/aboutUs");
    },
    // 修改密码
    toChangePassword() {
      this.$router.push("/changePassword");
    }
  },
};
</script>

<style lang="scss" scoped>
.content {
  font-size: 0.1rem;
  width: 100%;
  min-height: 100%;
  background-color: #f7f9fa;
  .list {
    width: 7.5rem;
    padding: 0 0.24rem;
    box-sizing: border-box;
    background: #ffffff;
    .listCon {
      width: 100%;
      height: 1rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 0.01rem solid #e7e7e7;
      span {
        font-size: 0.3rem;
        font-family: PingFang SC;
        font-weight: 500;
        color: #333333;
      }
      img {
        width: 0.14rem;
        height: 0.26rem;
      }
    }
  }
  .list .listCon:last-child {
    border-bottom: 0;
  }
}
</style>